<template>
  <div class="mapBaseInfo">
    <div class="items">
      <div class="label">企业名称</div>
      <div class="text">{{ mapBaseInfo.enterpriseName || '' }}</div>
    </div>
    <div class="items">
      <div class="label">站点名称</div>
      <div class="text">{{ mapBaseInfo.subname || '' }}</div>
    </div>
    <div class="items">
      <div class="label">环保负责人</div>
      <div class="text">{{ mapBaseInfo.linkman || '' }}</div>
    </div>
    <div class="items">
      <div class="label">电话</div>
      <div class="text">{{ mapBaseInfo.mobile || '' }}</div>
    </div>
    <div class="items">
      <div class="label">地址</div>
      <div class="text">{{ mapBaseInfo.address || '' }}</div>
    </div>
    <div class="items">
      <div class="label">所属行业</div>
      <div class="text">{{ mapBaseInfo.industryCode || '' }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MapBaseInfo',
  props: {
    mapBaseInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {}
  },
  watch: {
    mapBaseInfo: {
      handler(val) {
        console.log('基础信息', val)
      },
      deep: true
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.mapBaseInfo {
  width: 100%;
  height: 100%;

  .items {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 10px;

    .label {
      padding: 10px 20px;
      width: 110px;
      text-align: center;
      color: #FFFFFF;
      margin-right: 10px;
      background: linear-gradient(90deg, #1566BF, #189FBC);
    }

    .text {
      flex: 1;
      padding: 10px 20px;
      color: #FFFFFF;
      background: rgba(24, 85, 154, 0.6);
    }
  }
}
</style>
